<!DOCTYPE html>
<html lang="en">
  <head>
    <meta charset="UTF-8" />
    <meta http-equiv="X-UA-Compatible" content="IE=edge" />
    <meta
      name="viewport"
      content="width=device-width, initial-scale=1, maximum-scale=1, minimum-scale=1, user-scalable=no"
    />
    <title>touch</title>
    <style>
      * {
        margin: 0;
        padding: 0;
      }
      body {
        font-size: 26px;
      }
      .box {
        position: absolute;
        left: 50%;
        top: 50%;
        transform: translate(-50%, -50%);
        width: 300px;
        height: 300px;
        background-color: yellowgreen;
      }
      .mask {
        position: absolute;
        left: 0;
        right: 0;
        top: 0;
        bottom: 0;
        background-color: rgba(0, 0, 0, 0.3);
      }
    </style>
  </head>
  <body>
    <div class="box">
      <li><a href="http://www.atguigu.com">硅谷~~~~</a></li>
      <li><a href="http://www.atguigu.com">硅谷~~~~</a></li>
      <li><a href="http://www.atguigu.com">硅谷~~~~</a></li>
      <li><a href="http://www.atguigu.com">硅谷~~~~</a></li>
      <li><a href="http://www.atguigu.com">硅谷~~~~</a></li>
      <li><a href="http://www.atguigu.com">硅谷~~~~</a></li>
    </div>
    <div class="mask"></div>
    <!-- <script src="./fastclick.js"></script> -->
    <script>
      // if ("addEventListener" in document) {
      //   document.addEventListener(
      //     "DOMContentLoaded",
      //     function () {
      //       FastClick.attach(document.body);
      //     },
      //     false
      //   );
      // }
    </script>
    <script>
      const mask = document.querySelector(".mask");
      const box = document.querySelector(".box");
      const allA = document.querySelectorAll("a");

      mask.addEventListener("touchend", function (e) {
        this.style.display = "none";
      });
      // a.addEventListener("click", function (e) {
      //   e.preventDefault();
      // });
      document.addEventListener("click", function (e) {
        e.preventDefault();
      });

      for (let i = 0; i < allA.length; i++) {
        const a = allA[i];
        a.addEventListener(
          "touchstart",
          function (e) {
            this.isMove = false;
          },
          false
        );
        a.addEventListener(
          "touchmove",
          function (e) {
            console.log("touchmove");
            this.isMove = true;
          },
          false
        );
        a.addEventListener(
          "touchend",
          function (e) {
            if (this.isMove) return;
            window.location.href = this.href;
          },
          false
        );
      }
    </script>
  </body>
</html>
